<template>
	<div class="header">
		<div class="headertop">
			<div class="left" @click="back">
				<span class="iconfont">&#xeb99;</span>
			</div>
			<div class="right">
				<h1>城市选择</h1>
			</div>
		</div>
		<div class="headerbottom">
			<ul class="check">
				<li class="active">境内</li>
				<li>境外·港澳台</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Header",
		methods:{
			back(){
				this.$router.push("/")
			}
		}
	}
	
	
</script>

<style scoped="scoped">
	.header .headertop{
		width: 100%;
		height:1.875rem;
		line-height:1.875rem;
		background-color: #00bcd4;
		color: #fff;
	}
	 .headertop .left{
		width: 5%;
		float: left;
		text-align: center;
	}
	 .headertop .left span{
		font-size:1rem;
	}
	.headertop .right{
		width: 95%;
		text-align: center;
		float: right;
	}
	
	.header .headerbottom{
		display: flex;
		justify-content: center;
		width: 100%;
		height:1.875rem;
		background-color: #00bcd4;
		color: #fff;
	}
	.headerbottom .check{
		width: 50%;
		height: 0.9375rem;
		border: 1px solid #fff;
		border-radius: 0.03rem;
		margin: 0 auto;
		margin-top: 0.3125rem;
	}
	.headerbottom .check li{
		width: 50%;
		height:0.9375rem;
		line-height: 0.9375rem;
		float: left;
		text-align: center;
		background-color: #00bcd4;
		font-size: 0.28rem;
		color: #fff;
	}
	.headerbottom .check .active{
		background-color: #fff;
		color: #00bcd4;
	}
	
	
	
/* 	.maplist:after{
		content: '';
		position: absolute;
		left:34% ;
		width:32%;
		height:11.4rem;
		border-bottom: 0rem;
	} */
</style>
